<template>
<div class="userBodyBack">
  <div class="userLeft">
    <ul>
      <li>
        <router-link :to="'/user/info'">个人资料</router-link>
      </li>
      <li>
        <router-link :to="'/user/order'">订单管理</router-link>
      </li>
      <li>
        <router-link :to="'/user/message'">消息中心</router-link>
      </li>
      <li>
        <router-link :to="'/user/remark'">评价中心</router-link>
      </li>
      <li>
        <router-link :to="'/user/shopcart'">我的购物车</router-link>
      </li>
      <li v-if="userStore.user.status===0">
        <router-link :to="'/user/store'">成为商家</router-link>
      </li>
      <li>
        <router-link :to="'/user/address'">地址管理</router-link>
      </li>
      <li>
        <router-link :to="'/user/collect'">收藏管理</router-link>
      </li>
    </ul>
  </div>
  <div class="userRight">
    <router-view></router-view>
  </div>
</div>
</template>

<script setup>
import {useUserStore} from "@/stores/userStore";

const userStore=useUserStore()
</script>

<style scoped>
.userBodyBack
{
  width: 100%;
  min-width: 1857px;
  background: #e8edea;
  /*height: 1000px;*/
  display: flex;
}
.userLeft
{
  margin-top: 10px;
  background: #01b6fd;
  width: 400px;
}
.userLeft ul
{
  padding-left: 0px;
}
.userLeft ul li
{
  box-sizing: border-box;
  color: white;
  height:120px;
  text-align: center;
  list-style: none;
  line-height: 120px;
  font-size: 20px;
}
a
{
  display: block;
  text-align: center;
  text-decoration: none;
  color: white;
}
a.router-link-active
{
  box-sizing: border-box;
  background-color: #ffffff;

  /*border-radius: 20px;*/
  color:#02b7fb;
  box-shadow: 0 3px 8px rgb(0 0 0 / 20%);
  font-weight: bold;
  /*width: 90%;*/
  /*height: 110px;*/
  /*margin:0 auto;*/
  /*margin-top: 10px;*/
  /*background: white;*/
  /*color: #01b6fd;*/
}
.userRight
{
  width: 100%;
  margin:10px;
  background: white;
}

</style>